//CustomNode.js
import React, { useState, useCallback } from "react";
import { Handle, Position } from "reactflow";
import "../CSS/customNode.css";
import ImageIconTag from './NodeIcon'

const TheCustomNodeType = ({ id, type, data, otherValue, handleShowCustomNode, OutputPortsCount }) => {
  const [isHovered, setIsHovered] = useState(false);
  const { label, isSelected, InputPortsCount } = data;
  const handleShowCustomNodeCallback = useCallback((event) => {
    handleShowCustomNode(event);
  }, [handleShowCustomNode]);
  const createLeftHandles = () =>
    Array.from({ length: InputPortsCount }, (_, index) => (
      <Handle
        key={`${id}-left-${index}`}
        type="target"
        position={Position.Left}
        id={`${id}-left-${index}`}
        style={{
          backgroundColor: "#555",
          top: `${(100 / (InputPortsCount + 1)) * (index + 1)}%`,
        }}
      />
    ));

  const createRightHandles = () =>
    Array.from({ length: OutputPortsCount }, (_, index) =>
      otherValue.some(
        (value) => value["sourceHandle"] === `${id}-right-${index}`
      ) ? (
        <Handle
          key={`${id}-right-${index}`}
          type="source"
          position={Position.Right}
          id={`${id}-right-${index}`}
          style={{
            backgroundColor: "#555",
            top: `${(100 / (OutputPortsCount + 1)) * (index + 1)}%`,
          }}
        />
      ) : (
        <Handle
          key={`${id}-right-${index}`}
          type="source"
          position={Position.Right}
          id={`${id}-right-${index}`}
          style={{
            backgroundColor: "#1976D2",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            color: "#fff",
            width: "12px",
            height: "12px",
            right: "-6px",
            top: `${(100 / (OutputPortsCount + 1)) * (index + 1)}%`,
          }}
          onClick={(event) => handleShowCustomNodeCallback(event)}
        >
        +</Handle>
      )
    );
  return (
    <div
      style={{
        borderRadius: "8px",
        display: "flex",
        justifyContent: "start",
        alignItems: "center",
        flexDirection: "row",
        fontSize: "12px",
        fontWeight: "bold",
        fontFamily: "Arial, sans-serif",
        backgroundColor: "#fff",
        color: "#333",
        height: "40px",
        width: "150px",
        paddingLeft: "8px",
        transition:
          "box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out",
        boxShadow: isHovered
          ? "0px 0px 20px rgba(0, 0, 0, 0.15)"
          : "0px 0px 10px rgba(0, 0, 0, 0.1)",
        border: isSelected ? "1.5px solid #1976D2" : "1px solid #ADADAD",
      }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      onClick={() => data?.onChange(id)}
    >

      {createLeftHandles()}
      {createRightHandles()}
      <ImageIconTag type={type} size="s"/>
      {type === "IfElseNode" ?? (
        <>
        <p style = {{
            position: "fixed",
            top: "15px",
            right: "10px",
            fontSize: "10px"
        }}>
          Else
        </p>
        <p style = {{
            position: "fixed",
            bottom: "15px",
            right: "10px",
            fontSize: "10px"
        }}>
          If
        </p>
        </>
      )}
      {label}
    </div>
  );
};

export default TheCustomNodeType;
